<script lang="ts">
  import {
    CommentMessage,
    CommentResposeMessage,
    Dynamic,
    getDynamicComment,
    getDynamicDetail,
    ReplyMeesage,
    ReplyResposeMessage,
    sendComment,
    sendReply
  } from '@/api/dynamic';
  import { DYNAMIC_DETAIL } from '@/constants/path';
  import { onLoad } from '@/hooks/uniapp-composition-hooks';
  import { defineComponent, ref } from '@vue/composition-api';
  import Comment from '@/components/business/dynamic-comment-input.vue';
  import { DNYMIC_LIKE_STATUS, FOLLOW_STATUS, REPLY_TYPE } from '@/enum/dynamic.enum';
  import { Message } from '@/libs';
  // import { useStore } from '@/store';
  // import { UserModule } from '@/store/modules/user.module';
  import DynamicCard from '@/components/business/dynamic-card.vue';

  export default defineComponent({
    components: {
      Comment,
      DynamicCard
    },
    filters: {
      getReplyTarget(replyItem: ReplyResposeMessage) {
        if (replyItem.type === REPLY_TYPE.REPLY) {
          return `@${replyItem.replyTargetUserInfo.nickName}`;
        }
        return '';
      }
    },
    setup() {
      // const userModule = useStore(UserModule);
      const dynamicId = ref(0);
      const detail = ref<Dynamic | null>({
        createTime: '',
        userInfo: null,
        updateTime: '',
        views: 0,
        userId: 0,
        content: '',
        id: 0,
        images: '',
        type: 0,
        love: 0,
        comment: 0,
        loveStatus: DNYMIC_LIKE_STATUS.NOT_LIKED,
        followStatus: FOLLOW_STATUS.NOT_FOLLOW
      });
      const commentInputText = ref('');

      const commentList = ref<CommentResposeMessage[]>([]);

      // 使用小程序生命周期的hooks
      onLoad((options: Record<string, any> | string | undefined) => {
        console.log('传入的内容是', options);
        if (typeof options === 'string') {
          options = JSON.parse(options);
        }

        if (typeof options !== 'string') {
          dynamicId.value = Number(options?.id);
          getDynamicDetail(Number(options?.id)).then((res) => {
            detail.value = res.data;
          });
          getDynamicComment(Number(options?.id)).then((res) => {
            commentList.value = res.data;
          });
        }
      });

      const commentInputShowStatus = ref(false);

      const comentOrReplyData = ref<CommentMessage | ReplyMeesage | null>(null);

      function showInput() {
        commentInputShowStatus.value = true;
      }

      function closeInput() {
        commentInputShowStatus.value = false;
      }
      const currentIndex = ref(-1);

      function openCommentInput() {
        comentOrReplyData.value = {
          commentDynamicId: dynamicId.value,
          commentContent: '',
          content: ''
        };
        commentInputText.value = '说点什么吧...';
        showInput();
      }

      function openReplyCommentInput({ item, index }: { item: CommentResposeMessage; index: number }) {
        currentIndex.value = index;
        comentOrReplyData.value = {
          type: REPLY_TYPE.COMMENT,
          replyTargetId: item.id,
          replyTargetUserId: item.commentUserId,
          content: '',
          dynamicId: dynamicId.value,
          commentId: item.id
        };
        commentInputText.value = `回复 ${item.userInfo.nickName}:`;
        showInput();
      }

      function openReplyReplyInput({
        replyItem,
        item,
        index
      }: {
        replyItem: ReplyResposeMessage;
        item: CommentResposeMessage;
        index: number;
        replyIndex: number;
      }) {
        currentIndex.value = index;
        comentOrReplyData.value = {
          type: REPLY_TYPE.REPLY,
          replyTargetId: replyItem.id,
          replyTargetUserId: replyItem.replyTargetUserId,
          content: '',
          dynamicId: dynamicId.value,
          commentId: item.id
        };
        commentInputText.value = `回复 ${replyItem.userInfo.nickName}:`;
        showInput();
      }

      function send() {
        if ((comentOrReplyData.value as ReplyMeesage)?.type) {
          const replyData = comentOrReplyData.value as ReplyMeesage;
          if (!replyData.content) {
            Message.warning('回复内容不能为空');
            return;
          }
          sendReply({
            ...replyData
          })
            .then((res) => {
              console.log(res);
              commentList.value[currentIndex.value].reply.push(res.data);
              detail.value!.comment += 1;
              closeInput();
              Message.success('评论成功');
            })
            .catch((err) => {
              console.log(err);
            });
        } else if (comentOrReplyData.value) {
          const comentData = comentOrReplyData.value as CommentMessage;
          if (!comentData.content) {
            Message.warning('评论内容不能为空');
            return;
          }
          sendComment({
            commentDynamicId: comentData.commentDynamicId,
            commentContent: comentData.content || ''
          })
            .then(async (res) => {
              console.log(res);
              detail.value!.comment += 1;
              commentList.value.push(res.data);
              closeInput();
              Message.success('评论成功');
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }

      return {
        detail,
        dynamicId,
        commentList,
        commentInputShowStatus,
        DYNAMIC_DETAIL,
        comentOrReplyData,
        commentInputText,
        openCommentInput,
        openReplyCommentInput,
        openReplyReplyInput,
        closeInput,
        showInput,
        send
      };
    }
  });
</script>

<template>
  <view class="dynamic-detail">
    <dynamic-card
      :showFollowButton="true"
      :detail.sync="detail"
      :dynamicId="dynamicId"
      @openCommentInput="openCommentInput"
    />
    <view class="line"></view>
    <view class="comment">
      <view class="comment-title">评论</view>
      <view class="comment-body">
        <template v-for="(item, index) in commentList">
          <view class="comment-item" :key="index">
            <image class="comment-user-avartar" :src="item.userInfo.avatarUrl" />
            <view class="comment-data">
              <view class="comment-message">
                <view class="comment-user-nick-name">{{ item.userInfo.nickName }}</view>
                <view class="comment-content"> {{ item.commentContent }} </view>
                <view class="comment-time"
                  >{{ item.createTime | getTime
                  }}<view
                    class="reply-button"
                    @click.stop="
                      openReplyCommentInput({
                        item,
                        index
                      })
                    "
                    >回复</view
                  >
                </view>
              </view>
              <view class="reply-message">
                <template v-for="(replyItem, replyIndex) in item.reply">
                  <veiw class="reply-item" :key="replyIndex">
                    <image class="reply-user-avartar" :src="replyItem.userInfo.avatarUrl" />
                    <view class="reply-data">
                      <view class="reply-user-nick-name">{{ replyItem.userInfo.nickName }}</view>
                      <view class="reply-content">
                        <text class="reply-target">{{ replyItem | getReplyTarget }}</text
                        >{{ replyItem.content }}
                      </view>
                      <view class="reply-time">
                        {{ replyItem.createTime | getTime
                        }}<view
                          class="reply-button"
                          :data-item="replyItem"
                          @click.stop="
                            openReplyReplyInput({
                              replyItem,
                              item,
                              index,
                              replyIndex
                            })
                          "
                          >回复</view
                        >
                      </view>
                    </view>
                  </veiw>
                </template>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
    <view class="buttom-comment" v-if="!commentInputShowStatus">
      <view class="buttom-comment-body">
        <view class="comment-input" @click.stop="openCommentInput"> 写评论 </view>
        <view class="dynamic-data">
          转发
          <image class="share" :src="DYNAMIC_DETAIL.SHARE" />
        </view>
      </view>
    </view>
    <comment
      v-model="comentOrReplyData.content"
      @send="send"
      :show="true"
      v-if="commentInputShowStatus"
      @clickInputOutSide="closeInput"
      :placeholder="commentInputText"
    />
  </view>
</template>

<style lang="scss" scoped>
  @mixin flex {
    display: flex;
  }

  @mixin flex-one {
    flex: 1;
  }

  @mixin avartar-big {
    width: 56rpx;
    height: 56rpx;
    background-color: #999999;
    border-radius: 50%;
  }

  @mixin avartar-middle {
    width: 48rpx;
    height: 48rpx;
    background-color: #999999;
    border-radius: 50%;
  }

  @mixin nick-name {
    /* 次要正文 */

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 26rpx;
    line-height: 36rpx;

    /* 辅助色 */

    color: #4d89c8;
  }

  @mixin content {
    /* 次要正文 */

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 26rpx;
    line-height: 36rpx;

    /* 主要文字 */

    color: #333333;
    margin-top: 8rpx;
  }

  @mixin time {
    margin-top: 8rpx;
    /* 次要正文 */

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 26rpx;
    line-height: 36rpx;

    /* 常规文字 */

    color: #666666;
  }

  @mixin reply-button {
    /* 次要正文 */

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 26rpx;
    line-height: 36rpx;

    /* 辅助色 */

    color: #7d90a9;
    margin-left: 42rpx;
    display: inline;
  }

  .dynamic-detail {
    padding: 0 30rpx 0 30rpx;

    .line {
      margin: 24rpx 0 24rpx 0;
      height: 1rpx;
      background: #f9f9f9;
    }

    .comment {
      padding-bottom: 250rpx;
      &-title {
        /* 主要正文 */

        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 39rpx;

        /* 主要文字 */

        color: #333333;
      }

      &-body {
        .comment-item {
          margin-top: 16rpx;
          @include flex;
          .comment-user-avartar {
            width: 56rpx;
            height: 56rpx;
            background-color: #999999;
            border-radius: 50%;
          }

          .comment-data {
            @include flex-one;
            vertical-align: top;
            margin-left: 16rpx;
          }
          .comment-user-nick-name {
            /* 次要正文 */

            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 26rpx;
            line-height: 36rpx;

            /* 辅助色 */

            color: #4d89c8;
          }

          .comment-content {
            /* 次要正文 */

            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 26rpx;
            line-height: 36rpx;

            /* 主要文字 */

            color: #333333;
            margin-top: 8rpx;
          }

          .comment-time {
            margin-top: 8rpx;
            /* 次要正文 */

            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 26rpx;
            line-height: 36rpx;

            /* 常规文字 */

            color: #666666;

            .reply-button {
              /* 次要正文 */
              display: inline;
              font-family: 'PingFang SC';
              font-style: normal;
              font-weight: 400;
              font-size: 26rpx;
              line-height: 36rpx;

              /* 辅助色 */

              color: #7d90a9;
              margin-left: 42rpx;
            }
          }
        }
        .reply-message {
          .reply-item {
            @include flex;
            margin-top: 16rpx;
            .reply-user-avartar {
              @include avartar-middle;
            }
            .reply-data {
              @include flex-one;
              margin-left: 16rpx;

              .reply-user-nick-name {
                @include nick-name;
              }

              .reply-content {
                @include content;
                .reply-target {
                  color: #4d89c8;
                  margin-right: 5rpx;
                }
              }

              .reply-time {
                @include time;
                .reply-button {
                  @include reply-button;
                }
              }
            }
          }
        }
      }
    }

    .buttom-comment {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      /* 可以通过margin-bottom来适配 */
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: 30rpx;
      background: #ffffff;
      box-shadow: 0px -4rpx 10rpx rgba(204, 204, 204, 0.4);

      &-body {
        height: 118rpx;
        /* 白 */

        display: flex;
        align-items: center;
      }

      .comment-input {
        width: 560rpx;
        height: 59rpx;

        /* 二级边框 */

        background: #e4e4e4;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        padding-left: 24rpx;

        /* 主要正文 */

        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 39rpx;

        /* 常规文字 */

        color: #666666;
      }

      .dynamic-data {
        margin-left: 35rpx;
        display: flex;
        align-items: center;
        .share {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
</style>
